<template>
  <panel>
    <div class="container-two-wrap">
      <div class="left">
        <div class="title-module">项目结构</div>
        <div class="table-tree">
          <el-row class="table-head">
            <el-col :span="12">项目结构编码</el-col>
            <el-col :span="12">项目结构名称</el-col>
          </el-row>
          <div class="table-body">
            <el-tree
              :data="data1"
              :props="defaultProps"
              node-key="id"
              :highlight-current="true"
              :expand-on-click-node="false"
              :render-content="renderContent">
            </el-tree>
          </div>
        </div>
      </div>

      <div >
        <div class="title-module">项目结构信息</div>
        <el-row class="bg-f" v-if="isShowText">

          <div class="p10">
            <el-button type="danger" size="small" @click="remove()">删除</el-button>
          </div>

          <el-col :span="24" class="form-wrap">
            <el-form :model="dataForm" ref="ruleForm" label-width="100px" :label-position="'left'">
              <el-form-item label="编号" prop="name" class="item-5">
                <el-input v-model="dataForm.id" size="small"></el-input>
              </el-form-item>
              <el-form-item label="内容" prop="text" class="item-5">
                <el-input v-model="dataForm.label" size="small"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
    </div>

  </panel>
</template>

<script>
  import { list2tree } from '@/utils/treeUtils';

  export default {
    data() {
      return {
        data: [
          {
            parentId: 0,
            id: 1,
            name: '一级 - 1',
            code: ''
          },
          {
            parentId: 1,
            id: 2,
            name: '二级 - 1',
            code: ''
          },
          {
            parentId: 0,
            id: 3,
            name: '一级 - 2',
            code: ''
          },
        ],
        data1: [],

        isShowText: false,
        dataForm: {},
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        selectedNode: {}
      }
    },
    mounted(){
      //转换数据格式
      this.data1 = list2tree(this.data);

    },
    methods: {
      /**
       * 添加子级别
       */
      append(event, store, data) {
        event.stopPropagation();
        store.append({
          parentId: 1,
          id: 2,
          name: '二级 - 1',
          code: '' }, data);
      },
      /**
       * 删除选中节点
       */
      remove() {
        this.selectedNode.store.remove(this.selectedNode.data);
      },
      /**
       * 选中节点信息
       */
      selected(node, store, data){
        this.selectedNode = {
          data: data,
          store: store
        };
        this.dataForm = data;
        this.isShowText = true;
      },

      renderContent(h, { node, data, store }) {
        return (
          <span on-click={ () => this.selected(node, store, data) } class="table-tr">
            <span class="table-button">
              <el-button size="mini" on-click={ (event) => this.append(event, store, data) }> + </el-button>
            </span>
            <span class="table-text">
              <span>{data.name}</span>
              <span>{data.id}</span>
            </span>
          </span>);
      }
    }
  };
</script>

